<template>
  <div class="cardthree-container">
    <div class="left">
      <span>
        <i class="dot"></i>
        <span class="total">538764</span>
      </span>
      <span>
        <i class="dot Violet-dot">
          <i class="dot-in"></i>
        </i>
        <span>Code pade</span>
      </span>
      <span>
        <i class="dot blue-dot">
          <i class="dot-in"></i>
        </i>
        <span>New users</span>
      </span>
    </div>
    <div class="right">
      <ve-ring  :extend="extend"></ve-ring>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    this.extend = {
      legend: {
        show: false
      },
      series: {
        labelLine: {
          show: false
        },
        radius: ["55%", "75%"],
        center: ["40%", "40%"],
        color: series => {
            console.log(series.name)
          if (series.name == "占比") {
            return {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#d4b9f8" // 0% 处的颜色  #f2d49f
                },
                {
                  offset: 1,
                  color: "#7fc0f8" // 100% 处的颜色 #f17e5f
                }
              ],
              globalCoord: false // 缺省为 false
            };
          } else {
            return {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#56bdf4" // 0% 处的颜色  #f2d49f
                },
                {
                  offset: 1,
                  color: "#5fe6d6" // 100% 处的颜色 #f17e5f
                }
              ],
              globalCoord: false // 缺省为 false
            };
          }
        },
        data: [
          {
            value: 75,
            name: "占比",
            
            label: {
              normal: {
                textStyle: {
                  fontSize: "10",
                  fontWeight: "bold"
                }
              }
            },
          },
          {
            value: 25,
            name: "搜索引擎占比",
            itemStyle:{
              borderColor:'#fff',
              borderWidth:4
            }
          }
        ]
      }
    };
    return {
     
    };
  }
};
</script>


<style lang="scss" scoped>
.cardthree-container {
  display: flex;
  flex-direction: row;
  .left {
    flex: 1;
    height: 120px;
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    margin-left: 50px;
    .dot {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 10px;
      background: #a8b0bb;
      position: relative;
      top: 4px;
    }
    .dot-in {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: inline-block;
      height: 10px;
      width: 10px;
      border-radius: 5px;
      background: #fff;
    }
    .Violet-dot {
      background: #e7c7fe;
    }
    .blue-dot {
      background: #94eeea;
    }
    .total {
      font-size: 38px;
      display: inline-block;
      margin-left: 10px;
      position: relative;
      top: 5px;
    }
  }
  .right {
    flex: 1;
    height: 100px;
  }
}
</style>


